<template>
  <el-row class="updateUser">
    <p style="font-size:24px;font-style:inherit;  padding-bottom: 20px;">用户信息</p>
    <el-col :span="12">
      <div>
        <el-form ref="form" :model="form" label-width="200px">
          <el-form-item label="用户id">
            <el-input v-model="form.userId" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
          <el-form-item label="用户账号">
            <el-input v-model="form.userCode" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input v-model="form.userEmail" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户角色">
            <el-select v-model="form.userRole"  placeholder="请选择用户角色">
              
              <el-option label="超级管理员" value="super"></el-option>
              <el-option label="管理员" value="root"></el-option>
              <el-option label="VIP会员" value="vip"></el-option>
              <el-option label="普通用户" value="normal"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否禁用">
            <el-switch v-model="form.isBlack"></el-switch>
          </el-form-item>
          <el-form-item label="是否会员">
            <el-switch v-model="form.isVIP"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认修改</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="updateUser-right">
        <el-avatar :size="400" :src="UserUrl" style="border: gray 1px dotted;"></el-avatar>
        <el-button type="primary" @click="updateAvatar">重置头像</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "updateUser",
  data() {
    return {
      user: this.$route.params.userId,
      UserUrl: "",
      form: {
        userId: "",
        userCode: "",
        userEmail: "",
        userRole: "",
        isBlack: false,
        isVIP: false,
        userName: ""
      }
    };
  },
  created() {
    this.get();
  },
  methods: {
    updateAvatar() {
      this.axios({
        method: "post",
        params: {
          userAvatar:
            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          userId: this.form.userId
        },
        url: "http://localhost:8090/user/updateUser"
      })
        .then(res => {
          this.get();
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },
    onSubmit() {
      this.axios({
        method: "post",
        params: {
          userId: this.form.userId,
          userName: this.form.userName,
          perms: this.form.userRole,
          isBlack: this.form.isBlack === true ? "Y" : "N",
          isVIP: this.form.isVIP === true ? "Y" : "N",
          userAvatar: this.UserUrl
        },
        url: "http://localhost:8090/user/updateUser"
      })
        .then(res => {
          this.$router.push("/manage");
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        });
    },
    cancel() {
      this.$router.push("/manage");
    },
    get() {
      this.axios({
        method: "get",
        params: {
          id: this.$route.params.userId
        },
        url: "http://localhost:8090/user/get"
      })
        .then(res => {
          this.form.userCode = res.data.userCode;
          this.form.userId = res.data.userId;
          this.form.userEmail = res.data.userEmail;
          this.form.userRole = res.data.perms;
          this.form.userName = res.data.userName;
          this.form.isBlack = res.data.isBlack === "Y" ? true : null;
          this.form.isVIP = res.data.isVIP === "Y" ? true : null;
          this.UserUrl = res.data.userAvatar;
          this.$message({
            type: "success",
            message: "成功!"
          });
        })
        .catch(e => {
            this.$message.error(e.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
.updateUser {
  text-align: center;
}
.updateUser-right {
  padding-left: 100px;
}
</style>